import React from 'react'
import {useState,useEffect} from "react"
import axios from '../utils/axios'
function ImgText() {
  let [activeIndex,setActiveIndex] = useState(-1)
  let [flag,setlag] = useState(false)
  let [arr,setArr] = useState([])
  useEffect(()=>{
      axios.get("/api/imgtextlist").then(res=>{
          setArr(res.data)
      })
  },[])
  let enterfn = (data,index)=>{
      console.log(data)
      console.log(index)
      setlag(data)
      setActiveIndex(index)
  }
  return (
    <div className='imgtextwrap'>
        {
            arr && arr.length ? arr.map((item,index)=>{
                return <div key={index} style={{display:"flex",position:"relative"}}>
                        <div className="son">
                            <img src={item.img} alt="" style={{wdith:"80%",height:"80%"}} onMouseEnter={()=>enterfn(true,index)} onMouseLeave={()=>enterfn(false,index)}/>
                             <p>{item.tit}</p>
                        </div>
                        <div className='nextdiv' style={{display:flag && index===activeIndex?"block":"none"}}></div>
                      
                </div>
            }):"暂无数据"
        }
    </div>
  )
}

export default ImgText